<template>
	<view class="add-invoice">
		<u-form
			labelPosition="left"
			:model="formData"
			labelWidth="160rpx"
			ref="form"
		>
			<u-form-item label="发票类型" prop="invoiceType">
				<view @click="showInvoiceTypePicker = true" class="flex-between">
					<u-text :text="formData.invoiceType" v-if="formData.invoiceType" color="#303133"></u-text>
					<u-text text="请选择发票类型" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;"></u-icon>
				</view>
				<u-picker
					:show="showInvoiceTypePicker"
					:columns="invoiceTypeColumns" 
					@confirm="confirmInvoiceType"
					@cancel="showInvoiceTypePicker = false"
				/>
			</u-form-item>
			<u-form-item label="抬头类型" prop="headerType">
				<u-radio-group v-model="formData.headerType">
				    <u-radio
						v-for="item in headerTypeList"
						:key="item"
						:label="item"
						:name="item"
				    />
				</u-radio-group>
			</u-form-item>
			<u-form-item label="发票抬头" prop="invoiceHeader">
				<view @click="showInvoiceHeaderPicker = true" class="flex-between">
					<u-text :text="formData.invoiceHeader" v-if="formData.invoiceHeader" color="#303133"></u-text>
					<u-text text="请选择发票类型" v-else color="#c0c4cc"></u-text>
					<u-icon name="arrow-right" color="#BEBEBE" size="28rpx" customStyle="margin-left: 30rpx;"></u-icon>
				</view>
				<u-picker
					:show="showInvoiceHeaderPicker"
					:columns="invoiceHeaderColumns" 
					@confirm="confirmInvoiceHeader"
					@cancel="showInvoiceHeaderPicker = false"
				/>
			</u-form-item>
			<u-form-item label="税号" prop="taxId">
				<u-input v-model="formData.taxId" placeholder=" " border="none" inputAlign="right" />
			</u-form-item>
			<u-form-item label="开户银行" prop="bank">
				<u-input v-model="formData.bank" placeholder="选填" border="none" inputAlign="right" />
			</u-form-item>
			<u-form-item label="银行账号" prop="bankAccount">
				<u-input v-model="formData.bankAccount" placeholder="选填" border="none" inputAlign="right" />
			</u-form-item>
			<u-form-item label="企业地址" prop="businessAddress">
				<u-input v-model="formData.businessAddress" placeholder="选填" border="none" inputAlign="right" />
			</u-form-item>
			<u-form-item label="企业电话" prop="businessPhone">
				<u-input v-model="formData.businessPhone" placeholder="选填" border="none" inputAlign="right" />
			</u-form-item>
			<u-form-item label="设置为默认抬头" labelWidth="230rpx">
				<u-checkbox-group v-model="checked">
					<u-checkbox shape="circle" :name="formData.id"></u-checkbox>
				</u-checkbox-group>
			</u-form-item>
		</u-form>
		
		<view class="bottom-add-btn">
			<u-button text="保存" shape="circle" @click="add" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {},
			headerTypeList: ['个人或事业单位', '企业'],
			checked: [],
			showInvoiceTypePicker: false,
			invoiceTypeColumns: [['电子发票']],
			showInvoiceHeaderPicker: false,
			invoiceHeaderColumns: [['绍兴奥体']],
		}
	},
	onLoad(options) {
		this.formData = options;
		this.checked = [options.defaultId];
	},
	methods: {
		confirmInvoiceType({ value }) {
			this.formData.invoiceType = value[0];
			this.showInvoiceTypePicker = false;
		},
		confirmInvoiceHeader({ value }) {
			this.formData.invoiceHeader = value[0];
			this.showInvoiceHeaderPicker = false;
		},
		add() {
			console.log(this.formData);
		}
	}
}
</script>

<style lang="scss" scoped>
.add-invoice {
	min-height: 100vh;
	background-color: #f6f6f6;
	padding: 20rpx 30rpx calc(150rpx + env(safe-area-inset-bottom));
	
	/deep/.u-form {
		background-color: #fff;
		border-radius: 20px;
		padding: 10rpx 30rpx;
		
		&-item__body__left__content__label {
			color: #333;
		}
		
		&-item__body {
			justify-content: space-between;
		}
		
		&-item__body__right {
			flex: 0 0 auto;
		}
		
		.u-radio-group {
			.u-radio {
				& + .u-radio {
					margin-left: 60rpx;
				}
			}
		}
	}
}
</style>
